<template>
  <div class="contain-edit">
    <div class="header">
      <p>订单管理/打印订单</p>
      <el-button class="link" type="primary">
        <router-link to="/orderList" style="color: #fff;">返回</router-link>
      </el-button>
    </div>
    <div class="main" id="main" v-if="type == 'long_rental'">
      <!--月租每月-->
      <div class="list" style="margin:40px auto;" v-if="info && info.rental && info.rental.rentalOtherfeeitem">
        <div class="" style="margin-bottom: 20px;font-weight: bold;">月租</div>
        <div class="flex-box-align" style="margin-bottom: 10px;">
          <div class="w50" style="white-space: nowrap">订单名称：{{info && info.orderName ? info.orderName : ""}}</div>
          <div class="w25" style="white-space: nowrap">租客：{{info && info.renterName ? info.renterName : ''}}</div>
          <div class="w25" style="white-space: nowrap;text-align: right">订单编号：{{info && info.orderNo ? info.orderNo : ''}}</div>
        </div>
        <div class="print_info">
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key ">项目</div>
              <div class="item-key flex">读数</div>
              <div class="item-key ">金额</div>
            </div>
          </div>
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key ">房租</div>
              <div class="item-key flex"></div>
              <div class="item-key ">{{info && info.rentFee ? info.rentFee : '0'}}</div>
            </div>
          </div>
          <div class="" v-if="info && info.rental && info.rental.rentalOtherfeeitem">
            <div class="item flex-box-container">
              <div class="item-key ">{{info && info.rental && info.rental.rentalOtherfeeitem}}</div>
              <div class="item-key flex"></div>
              <div class="item-key ">{{info && info.otherFee ? info.otherFee : '0'}}</div>
            </div>
          </div>
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key ">水费</div>
              <div class="flex flex-box-container">
                <div class="item-flex">上月读数</div>
                <div class="item-flex">{{info && info.lastWaterReadout && info.lastWaterReadout.readouts ? info.lastWaterReadout.readouts : '0'}}</div>
                <div class="item-flex">本月读数</div>
                <div class="item-flex">{{info && info.currentWaterReadout && info.currentWaterReadout.readouts ? info.currentWaterReadout.readouts : '0'}}</div>
              </div>
              <div class="item-key ">{{info && info.waterFee ? info.waterFee : '0'}}</div>
            </div>
          </div>
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key ">电费</div>
              <div class="flex flex-box-container">
                <div class="item-flex">上月读数</div>
                <div class="item-flex">{{info && info.lastElectricReadout && info.lastElectricReadout.readouts ? info.lastElectricReadout.readouts : '0'}}</div>
                <div class="item-flex">本月读数</div>
                <div class="item-flex">{{info && info.currentElectricReadout && info.currentElectricReadout.readouts ? info.currentElectricReadout.readouts : '0'}}</div>
              </div>
              <div class="item-key ">{{info && info.electricFee ? info.electricFee : '0'}}</div>
            </div>
          </div>
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key ">合计</div>
              <div class="item-key flex"></div>
              <div class="item-key ">{{info && info.totalFee ? info.totalFee : '0'}}</div>
            </div>
          </div>
          <div class="flex-box-align" style="margin-top: 10px;">
            <div class="w50" >打印人：{{manager}}</div>
            <div class="w25" style="white-space: nowrap">打印时间：{{time.split(' ')[0]}}</div>
            <div class="w25" style="text-align: right">订单类型：{{info && info.orderTypeText ? info.orderTypeText : ''}}</div>
          </div>
        </div>
      </div>
      <!--月租首月-->
      <div class="list" style="margin:0 auto;" v-else>
        <div class="" style="margin-bottom: 20px;font-weight: bold;">月租</div>
        <div class="flex-box-align" style="margin-bottom: 10px;">
          <div class="w50" style="white-space: nowrap">订单名称：{{info && info.orderName ? info.orderName : ""}}</div>
          <div class="w25" style="white-space: nowrap">租客：{{info && info.renterName ? info.renterName : ''}}</div>
          <div class="w25" style="white-space: nowrap;text-align: right">订单编号：{{info && info.orderNo ? info.orderNo : ''}}</div>
        </div>
        <div class="print_info">
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key ">项目</div>
              <div class="item-key flex">读数</div>
              <div class="item-key ">金额</div>
            </div>
          </div>
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key ">房租</div>
              <div class="item-key flex"></div>
              <div class="item-key ">{{info && info.rentFee ? info.rentFee : ''}}</div>
            </div>
          </div>
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key ">押金</div>
              <div class="item-key flex"></div>
              <div class="item-key ">{{info && info.despositFee ? info.despositFee : '0'}}</div>
            </div>
          </div>
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key ">水费</div>
              <div class="flex flex-box-container">
                <div class="item-flex">上月读数</div>
                <div class="item-flex">{{info && info.lastWaterReadout && info.lastWaterReadout.readouts ? info.lastWaterReadout.readouts : ''}}</div>
                <div class="item-flex">本月读数</div>
                <div class="item-flex">{{info && info.currentWaterReadout && info.currentWaterReadout.readouts ? info.currentWaterReadout.readouts : ''}}</div>
              </div>
              <div class="item-key ">{{info && info.waterFee ? info.waterFee : ''}}</div>
            </div>
          </div>
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key ">电费</div>
              <div class="flex flex-box-container">
                <div class="item-flex">上月读数</div>
                <div class="item-flex">{{info && info.lastElectricReadout && info.lastElectricReadout.readouts ? info.lastElectricReadout.readouts : ''}}</div>
                <div class="item-flex">本月读数</div>
                <div class="item-flex">{{info && info.currentElectricReadout && info.currentElectricReadout.readouts ? info.currentElectricReadout.readouts : ''}}</div>
              </div>
              <div class="item-key ">{{info && info.electricFee ? info.electricFee : ''}}</div>
            </div>
          </div>
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key ">合计</div>
              <div class="item-key flex"></div>
              <div class="item-key ">{{info && info.totalFee ? info.totalFee : ''}}</div>
            </div>
          </div>
          <div class="flex-box-align" style="margin-top: 10px;">
            <div class="w50">打印人：{{manager}}</div>
            <div class="w25">打印时间：{{time.split(' ')[0]}}</div>
            <div class="w25" style="text-align: right">订单类型：{{info && info.orderTypeText ? info.orderTypeText : ''}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="main" id="main" v-else-if="type=='day_rental'">
      <!--日租-->
      <div class="list" style="margin:0 auto;">
        <div class="" style="margin-bottom: 20px;font-weight: bold;">日租</div>
        <div class="flex-box-align" style="margin-bottom: 10px;">
          <div class="w50" style="white-space: nowrap">订单名称：{{info && info.orderName ? info.orderName : ""}}</div>
          <div class="w25" style="white-space: nowrap">租客：{{info && info.renterName ? info.renterName : ''}}</div>
          <div class="w25" style="white-space: nowrap;text-align: right">订单编号：{{info && info.orderNo ? info.orderNo : ''}}</div>
        </div>
        <div class="print_info">
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key flex">项目</div>
              <div class="item-key flex">金额</div>
            </div>
          </div>
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key flex">房源</div>
              <div class="item-key flex">
                {{ info && info.rental && info.rental.gardenName ? info.rental.gardenName : ''}} --
                {{ info && info.rental && info.rental.unitName ? info.rental.unitName : ''}} --
                {{ info && info.rental && info.rental.buildName ? info.rental.buildName : ''}} --
                {{ info && info.rental && info.rental.houseRoomNo ? info.rental.houseRoomNo : ''}}
              </div>
            </div>
          </div>
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key flex">房租</div>
              <div class="item-key flex">{{info && info.rentFee ? info.rentFee : '0'}}</div>
            </div>
          </div>
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key flex">押金</div>
              <div class="item-key flex">{{info && info.despositFee ? info.despositFee : '0'}}</div>
            </div>
          </div>
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key flex">合计</div>
              <div class="item-key flex">{{info && info.totalFee ? info.totalFee : '0'}}</div>
            </div>
          </div>
          <div class="flex-box-align" style="margin-top: 10px;">
            <div class="w50">打印人：{{manager}}</div>
            <div class="w25">打印时间：{{time.split(' ')[0]}}</div>
            <div class="w25" style="text-align: right">订单类型：{{info && info.orderTypeText ? info.orderTypeText : ''}}</div>
          </div>
        </div>
      </div>

    </div>
    <div class="main" id="main" v-else-if="type== 'year_water_rental'">
      <div class="list" style="margin:40px auto;">
        <div class="" style="margin-bottom: 20px;font-weight: bold;">年租水电</div>
        <div class="flex-box-align" style="margin-bottom: 10px;">
          <div class="w50" style="white-space: nowrap">订单名称：{{info && info.orderName ? info.orderName : ""}}</div>
          <div class="w25" style="white-space: nowrap">租客：{{info && info.renterName ? info.renterName : ''}}</div>
          <div class="w25" style="white-space: nowrap;text-align: right">订单编号：{{info && info.orderNo ? info.orderNo : ''}}</div>
        </div>
        <div class="print_info">
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key ">项目</div>
              <div class="item-key flex">读数</div>
              <div class="item-key ">金额</div>
            </div>
          </div>
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key ">房租</div>
              <div class="item-key flex"></div>
              <div class="item-key ">{{info && info.rentFee ? info.rentFee : '0'}}</div>
            </div>
          </div>
          <div class="" v-if="info && info.rental && info.rental.rentalOtherfeeitem">
            <div class="item flex-box-container">
              <div class="item-key ">{{info && info.rental && info.rental.rentalOtherfeeitem}}</div>
              <div class="item-key flex"></div>
              <div class="item-key ">{{info && info.otherFee ? info.otherFee : '0'}}</div>
            </div>
          </div>
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key ">水费</div>
              <div class="flex flex-box-container">
                <div class="item-flex">上月读数</div>
                <div class="item-flex">{{info && info.lastWaterReadout && info.lastWaterReadout.readouts ? info.lastWaterReadout.readouts : '0'}}</div>
                <div class="item-flex">本月读数</div>
                <div class="item-flex">{{info && info.currentWaterReadout && info.currentWaterReadout.readouts ? info.currentWaterReadout.readouts : '0'}}</div>
              </div>
              <div class="item-key ">{{info && info.waterFee ? info.waterFee : '0'}}</div>
            </div>
          </div>
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key ">电费</div>
              <div class="flex flex-box-container">
                <div class="item-flex">上月读数</div>
                <div class="item-flex">{{info && info.lastElectricReadout && info.lastElectricReadout.readouts ? info.lastElectricReadout.readouts : '0'}}</div>
                <div class="item-flex">本月读数</div>
                <div class="item-flex">{{info && info.currentElectricReadout && info.currentElectricReadout.readouts ? info.currentElectricReadout.readouts : '0'}}</div>
              </div>
              <div class="item-key ">{{info && info.electricFee ? info.electricFee : '0'}}</div>
            </div>
          </div>
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key ">合计</div>
              <div class="item-key flex"></div>
              <div class="item-key ">{{info && info.totalFee ? info.totalFee : '0'}}</div>
            </div>
          </div>
          <div class="flex-box-align" style="margin-top: 10px;">
            <div class="w50">打印人：{{manager}}</div>
            <div class="w25">打印时间：{{time.split(' ')[0]}}</div>
            <div class="w25" style="text-align: right;white-space: nowrap">订单类型：{{info && info.orderTypeText ? info.orderTypeText : ''}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="main" id="main" v-else-if="type== 'year_rental'">
      <div class="list" style="margin:40px auto;">
        <div class="" style="margin-bottom: 20px;font-weight: bold;">年租</div>
        <div class="flex-box-align" style="margin-bottom: 10px;">
          <div class="w50" style="white-space: nowrap">订单名称：{{info && info.orderName ? info.orderName : ""}}</div>
          <div class="w25" style="white-space: nowrap">租客：{{info && info.renterName ? info.renterName : ''}}</div>
          <div class="w25" style="white-space: nowrap;text-align: right">订单编号：{{info && info.orderNo ? info.orderNo : ''}}</div>
        </div>
        <div class="print_info">
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key ">项目</div>
              <div class="item-key flex">读数</div>
              <div class="item-key ">金额</div>
            </div>
          </div>
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key ">房租</div>
              <div class="item-key flex"></div>
              <div class="item-key ">{{info && info.rentFee ? info.rentFee : '0'}}</div>
            </div>
          </div>
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key ">押金</div>
              <div class="item-key flex"></div>
              <div class="item-key ">{{info && info.despositFee ? info.despositFee : '0'}}</div>
            </div>
          </div>
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key ">水费</div>
              <div class="flex flex-box-container">
                <div class="item-flex">上月读数</div>
                <div class="item-flex">{{info && info.lastWaterReadout && info.lastWaterReadout.readouts ? info.lastWaterReadout.readouts : '0'}}</div>
                <div class="item-flex">本月读数</div>
                <div class="item-flex">{{info && info.currentWaterReadout && info.currentWaterReadout.readouts ? info.currentWaterReadout.readouts : '0'}}</div>
              </div>
              <div class="item-key ">{{info && info.waterFee ? info.waterFee : '0'}}</div>
            </div>
          </div>
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key ">电费</div>
              <div class="flex flex-box-container">
                <div class="item-flex">上月读数</div>
                <div class="item-flex">{{info && info.lastElectricReadout && info.lastElectricReadout.readouts ? info.lastElectricReadout.readouts : '0'}}</div>
                <div class="item-flex">本月读数</div>
                <div class="item-flex">{{info && info.currentElectricReadout && info.currentElectricReadout.readouts ? info.currentElectricReadout.readouts : '0'}}</div>
              </div>
              <div class="item-key ">{{info && info.electricFee ? info.electricFee : '0'}}</div>
            </div>
          </div>
          <div class="">
            <div class="item flex-box-container">
              <div class="item-key ">合计</div>
              <div class="item-key flex"></div>
              <div class="item-key ">{{info && info.totalFee ? info.totalFee : '0'}}</div>
            </div>
          </div>
          <div class="flex-box-align" style="margin-top: 10px;">
            <div class="w50">打印人：{{manager}}</div>
            <div class="w25">打印时间：{{time.split(' ')[0]}}</div>
            <div class="w25" style="text-align: right">订单类型：{{info && info.orderTypeText ? info.orderTypeText : ''}}</div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="identify == 0" style="margin-top: 20px;text-align: center">
      <el-button @click="handleClickPrint" type="primary" size="medium">打印</el-button>
    </div>
  </div>
</template>

<script>
  let CONSTANT = require('../../constant/constant.js');
  let common = require("../../common.js");

  export default {
    data() {
      return {
        id:'',
        info: {
          title: "",
          content: "",
        },
        meno: [],
        order: {

        },
        type: "",
        identify: "",
        pub: "",
        pubParams: {
          meno: "",
          otherFee: ""
        },
        rules: {
          otherFee: [
            {required: true, message: '请输入杂费', trigger: 'blur'},
            {type: 'number', message: '杂费必须为数字值'}
          ]
        },
        dialogVisible1: false,
        otherFeeList: [],
        manager: "",
        time: ""
      }
    },
    mounted() {
      this.id  = this.$router.currentRoute.query.id;
      this.type = this.$router.currentRoute.query.type;
      this.identify = sessionStorage.getItem("identify");
      this.manager = sessionStorage.getItem('manager')
      this.time = new Date().toLocaleString()
      this.getDetail(this.id);
    },
    methods: {
      getDetail(id){
        let url = this.identify == 1 ? CONSTANT.URL.ORDER.DETAIL : CONSTANT.URL.L_ORDER.DETAIL;
        let param = {
          id:id
        };
        common.requestAjax(url,{},param,(res)=>{
          console.log(res)
          this.loading = false;
          this.info = res.data.bussData;
          this.meno = this.info.meno ? JSON.parse(this.info.meno) : []
          if (this.info.rental.rentalOtherfeeitem) {
            this.info.rental.rentalOtherfeeitem.split(";").map( (item, index) => {
              this.otherFeeList.push({
                name: item,
                value: ""
              })
            })
          }
          this.order = this.info.rental;
        })
      },
      handleClickPrint() {
        // 1.设置要打印的区域 div的className
        var newstr = document.getElementById("main").innerHTML
        // 2. 复制给body，并执行window.print打印功能
        document.body.innerHTML = newstr
        // 3. 还原：将旧的页面储存起来，当打印完成后返给给页面。
        var oldstr = document.body.innerHTML
        window.print()
        document.body.innerHTML = oldstr
        window.location.reload()
        return false
      },
    },
  }
</script>
<style lang="scss" scoped>
  .w50 {
    width: 50%;
    font-size: 14px;
  }
  .w25 {
    width: 25%;
  }
  .print_info {
    border-top: 1px solid #dedede;
    .item-key {
      text-align: center!important;
    }
    .item{
      min-height: 40px;
      border: 1px solid #dedede;
      border-top:none;
      .item-key{
        float: left;
        width: 120px;
        padding-left: 20px;
        padding-right: 10px;
        height: 40px;
        line-height: 40px;
        text-align: right;
        border-right: 1px solid #dedede;
      }
      .item-value{
        // width: auto;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        float: left;
      }
      .item-flex {
        flex: 1;
        -webkit-flex: 1;
        border-right: 1px solid #dedede;
        padding-left: 20px;
        padding-right: 10px;
        height: 40px;
        line-height: 40px;
      }
    }
  }

  .item-left {
    float: left;
    width: 120px;
    padding-left: 20px;
    padding-right: 10px;
    // height: 40px;
    line-height: 40px;
    text-align: right;
    border-right: 1px solid #dedede;
  }
  .item-right {
    // height: 40px;
    // line-height: 40px;
    padding-left: 20px;
    float: left;
  }
  .backage {
    height: auto;
    border: 1px solid #dedede;
    border-top: none;
  }
  .analyse{
    margin-left: 151px;
    height:530px;
    padding-top: 20px;
    display: flex;
  }
  .pic{
    width:330px;
    height:530px;
    // background-color:yellowgreen;
    display: inline-block;
    margin-right: 30px;
    padding-left: 20px;
    .avatar-info{
      .avatar{
        width:100px;
        height:100px;
        background-color:#626262;
        margin-top:50px;
        border-radius:50%;
        float:left;
        .avatar-img{
          width: 100%;
          height: 100%;
        }
      }
      .info{
        // float:left;
        // margin-top:50px;
        margin-left:10px;
        padding: 60px 20px;
      }
    }
  }
  .pic-font{
    border-left: 5px solid #999;
    width: 100px;
    height: 40px;
    line-height: 40px;
    // background-color: pink;
    // margin-left: 15px;
    margin-bottom: 15px;
    display: block;
  }
  .wins{
    display: inline-block;
    height: 350px;
    flex: 1;
  }
  .match{
    list-style:none;
    padding-left:20px;
    margin-top:20px;
    .match-item{
      width: 300px;
      height:50px;
      background-color: #eee;
      margin-bottom:30px;
    }
  }
  #chart{
    width:300px;
    height:300px;
  }
  .honor {
    float: left;
    width: 150px;
    height: 150px;
    margin-right: 20px;
    // background-color: yellow;
    .honor-img{
      width: 70px;
      height: 70px;
      padding: 30px 40px 0px 40px;
    }
    .honor-span{
      width: 40px;
      height: 20px;
      border: 1px solid #ccc;
      display: block;
      margin-left: 55px;
    }
    .honor-text{
      display: block;
      text-align: center;
      font-size: 14px;
    }
  }

</style>


